<template>
	<view class="menu w-f ph-24 pt-30">
		<u-scroll-list indicatorActiveColor="#FABB3C">
			<view class="f fc-w">
				<view class="box f fd-c ai-c mb-32 " @click="toClassify(item)" v-for="(item, index) in menuList" :key="index"
					style=" min-width: 142rpx;">
					<image :src="item.picUrl" class="w-52 h-52 mb-16"></image>
					<view class="fs-24 text-color2">{{ item.name }}</view>
				</view>
			</view>
		</u-scroll-list>
		<u-swiper :list="bannerList" radius="0" height="90" class="mt-12" keyName="picUrl"></u-swiper>
	</view>
</template>
<script setup lang="ts">
	import { ref } from 'vue';
	const type = ref('');
	const menuList = ref<any[]>([]);
	const bannerList = ref<any[]>([]);
	const props = defineProps({
		petType: {
			type: Number,
		},
	});
	function getData(data : any, typeData : string) {
		type.value = typeData;
		menuList.value = data;
	}
	function getBanner(data : any) {
		console.log(data)
		bannerList.value = data;
	}
	const toClassify = (data : any) => {
		uni.navigateTo({
			url: `/pages_shop/toClassify?parentId=${data.parentId}&id=${data.id}&type=${type.value}`,
		});
	};
	defineExpose({ getData, getBanner });
</script>
<style lang="scss" scoped>
	.menu {
		background-image: linear-gradient(180deg, #ffffff 0%, #ffffff 67%, #f5f5f5 100%);
		
		.box {
			width: 20%;
		}
	}
</style>